<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>layCalenderMark</title>
    <link href="https://unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="./contextMenu/contextMenu.css" media="all">
</head>
<body>
<script src="https://unpkg.com/layui@2.8.17/dist/layui.js"></script>
<div class="layui-inline laydate-calender-box">
    <div class="layui-input-inline" id="laydate-calender"></div>
</div>
</body>

<script>
    layui.extend({
        contextMenu: '{/}./contextMenu/contextMenu'
    });
    layui.use(['jquery', 'contextMenu'], function () {
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var layer = layui.layer;

        var init_date = '2023-9-12';// 初始日期，可设为当天或空
        var year = '';// 年份
        var mark = {};// 标注数据
        var holidays = [];// 节假日|加班数据

        loadCalender('#laydate-calender');// 主方法：加载laydate日历及标记数据

        function loadCalender(elem) {
            loadDateNoteData();// 加载日历标注数据
            loadLayDate(elem);// 加载laydate日历
        }

        function loadDateNoteData() {
            if (init_date) {
                year = init_date.split('-')[0];
            }
            let data = {year: year};
            // TODO:请求后台当年的节假日数据，这里演示用假数据：
            mark = {// 标记日期数据
                '0-10-14': '生日',
                '0-12-31': '跨年', //每年的日期
                '0-0-10': '工资', //每月某天
                '0-0-15': '月中',
                '2017-8-15': '', //如果为空字符，则默认显示数字+徽章
                '2099-10-14': '呵呵'
            };
            holidays = [
                // 休息日
                ['2022-12-31', '2023-1-1', '2023-1-2', '2023-1-21', '2023-1-22', '2023-1-23', '2023-1-24', '2023-1-25', '2023-1-26', '2023-1-27', '2023-4-5', '2023-4-29', '2023-4-30', '2023-5-1', '2023-5-2', '2023-5-3', '2023-6-22', '2023-6-23', '2023-6-24', '2023-9-29', '2023-9-30', '2023-10-1', '2023-10-2', '2023-10-3', '2023-10-4', '2023-10-5', '2023-10-6'],
                // 加班日
                ['2023-1-28', '2023-1-29', '2023-4-23', '2023-5-6', '2023-6-25', '2023-10-7', '2023-10-8']
            ];
        }

        function loadLayDate(elem) {
            // 先移除原节点再重新添加，避免重复渲染
            let date_parent = $(elem).parent();
            $(elem).remove();
            date_parent.append('<div class="layui-input-inline" id="laydate-calender"></div>');
            // 渲染日历
            laydate.render({
                elem: elem,
                weekStart: 1,// 设置周一为起始周
                position: 'static',// 展开面板
                // calendar: true,// 显示传统节日
                btns: ['now'],// 底部按钮
                // theme: 'grid',// 格子主题
                mark: mark,// 自定义标注
                value: init_date,// 初始值
                holidays: holidays,// 节假日|加班
                ready: function (date) {
                    initDateRightMenu("#laydate-calender");// 初始化右键菜单
                },
                done: function (value, date, endDate) {// 选择后的回调
                    $(".ul-context-menu").hide();// 点击事件，隐藏右键菜单
                    switchYear(value);
                },
                change: function (value, date) {// 切换日期的回调
                    switchYear(value);
                }
            });
        }

        // 切换年份
        function switchYear(value) {
            new_year = value.split('-')[0];
            if (year !== new_year) {
                init_date = value;
                loadCalender('#laydate-calender');// 重新加载该年份的日历、标注数据
            }
        }

        // 给layui日历添加右键标注功能
        function initDateRightMenu(laydate_elem) {
            // 先移除原右键菜单再重新添加，避免重复渲染
            $(".ul-context-menu").remove();
            // 初始化菜单
            $(laydate_elem + " .layui-laydate-content td").contextMenu({
                width: 80, // width
                itemHeight: 30, // 菜单项height
                bgColor: "#fff", // 背景颜色
                color: "#777", // 字体颜色
                fontSize: 14, // 字体大小
                hoverBgColor: "#16baaa", // hover背景颜色
                hoverColor: "#fff", // hover背景颜色
                target: function (ele) { // 当前元素
                    let menu_box = $(".ul-context-menu");
                    let li_node = menu_box.children('li');
                    let type_class = ele.find("span").attr('class');
                    let date_type = 'normal';
                    if (type_class) {
                        li_node.eq(0).hide();
                        li_node.eq(1).hide();
                        li_node.eq(2).hide();
                        li_node.eq(3).show();
                        if (type_class === "laydate-day-mark") {
                            date_type = 'note';

                        }
                        if (type_class === "laydate-day-holidays") {
                            date_type = 'rest';
                            if (ele.find("span").attr('type') === "work") {
                                date_type = 'work';
                            }
                        }
                    } else {
                        li_node.eq(0).show();
                        li_node.eq(1).show();
                        li_node.eq(2).show();
                        li_node.eq(3).hide();
                    }
                    menu_box.attr("data-value", ele.attr("lay-ymd"));
                    menu_box.attr("data-type", date_type);
                },
                menu: [// 菜单项及回调
                    {
                        text: "休假",
                        icon: '<i class="layui-icon layui-icon-time" style="margin-right: -5px;"></i>',
                        callback: function (ele) {
                            init_date = ele.parent().attr("data-value");
                            if (sendNoteRequest('rest')) {
                                holidays[0].push(init_date);
                                loadLayDate(laydate_elem);
                            }
                        }
                    },
                    {
                        text: "加班",
                        icon: '<i class="layui-icon-chart-screen" style="margin-right: -5px;"></i>',
                        callback: function (ele) {
                            init_date = ele.parent().attr("data-value");
                            if (sendNoteRequest('work')) {
                                holidays[1].push(init_date);
                                loadLayDate(laydate_elem);
                            }
                        }
                    },
                    {
                        text: "其他",
                        icon: '<i class="layui-icon layui-icon-add-1" style="margin-right: -5px;"></i>',
                        callback: function (ele) {
                            init_date = ele.parent().attr("data-value");
                            layer.prompt({title: '请输入标注内容（1~3个字符）'}, function (note, index, elem) {
                                if (note === '') return elem.focus();
                                if (note.length > 3) {
                                    layer.alert('标注只能填写1到3位字符', {title: '温馨提示'});
                                    return false;
                                }
                                if (sendNoteRequest('note', note)) {
                                    layer.close(index);
                                    // 添加自定义标记
                                    mark[init_date] = note;
                                    loadLayDate(laydate_elem);
                                }
                            });

                        }
                    },
                    {
                        text: "移除",
                        icon: '<i class="layui-icon layui-icon-delete" style="margin-right: -5px;"></i>',
                        callback: function (ele) {
                            init_date = ele.parent().attr("data-value");
                            let date_type = ele.parent().attr("data-type");
                            if (sendNoteRequest('delete')) {
                                // 移除日期标记数据
                                removeNote(date_type);
                                loadLayDate(laydate_elem);
                            }
                        }
                    }
                ]
            });
        }

        // 移除日期标注
        function removeNote(type) {
            if (type === 'rest') {
                holidays[0] = holidays[0].filter(function (item) {
                    return item !== init_date
                });
            }
            if (type === 'work') {
                holidays[1] = holidays[1].filter(function (item) {
                    return item !== init_date
                });
            }
            if (type === 'note') {
                delete mark[init_date];
            }
        }

        // 标注请求方法
        function sendNoteRequest(type, note) {
            let status = 0;
            note = note || '';
            let data = {'holiday': init_date, 'type': type, 'note': note};// type：rest work note delete
            console.log(data);

            // TODO: 请求后台接口，标记数据：
            status = 1;// 这里测试，直接返回1

            return status;
        }
    });
</script>
